<template>
  <view style="opacity: 0;">
    <view class="marker-view-box">
      <!-- 顶部卡片 -->
      <view class="property-card">
        <view class="property-info" :data="JSON.stringify(data)" onclick="buildingViewClickHandler(event)">
          <view class="property-name">{{ data.buildName }}</view>
          <!-- <view class="property-price" v-if="Number(data.rentFeeStart) === 0 && Number(data.rentFeeEnd) === 0">面议</view>
      <view class="property-price" v-else-if="Number(data.rentFeeStart) ===  Number(data.rentFeeEnd) ">{{parseFloat(Number(data.rentFeeStart).toFixed(2))}}元/m²/月</view>
      <view class="property-price" v-else>{{parseFloat(Number(data.rentFeeStart).toFixed(2))}}-{{parseFloat(Number(data.rentFeeEnd).toFixed(2))}}元/m²/月</view> -->
        </view>
        <img class="property-arrow" :src="markerArrow" alt="arrow">
      </view>

      <!-- 中间建筑图片区域 -->
      <view class="building-container">
        <view class="building-image" :style="{ 'background-image': 'url(' + markerBg + ')' }">
          <view class="outer-circle">
            <img :src="markerCircle" class="circle-img" />
            <img :src="data.buildImg ? data.buildImg.split(',')[0] : '/industry/static/placeholder.png'"
              class="building-img" />
            <view class="inner-circle">{{ data.idx }}</view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MarkerView',
  props: {
    data: {
      type: Object,
      default: () => { }
    },
  },
  data() {
    return {
      markerArrow: '/industry/static/map/marker_arrow.png',
      markerBg: '/industry/static/map/marker_bg.png',
      markerCircle: '/industry/static/map/marker_circle.png'
    }
  },
  mounted() {
    window.buildingViewClickHandler = this.clickHandler
  },
  methods: {
    clickHandler(e) {
      const json = e.currentTarget.getAttribute('data')
      const data = JSON.parse(json)
      uni.setStorageSync('btn', JSON.stringify(data))
      uni.navigateTo({
        url: '/pages/home/homedetail?id=' + data.buildId
      })
    }
  }
}
</script>

<style scoped>
.marker-view-box {
  transform-origin: center bottom;
  transform: scale(0.7);
}

/* 顶部卡片样式 */
.property-card {
  padding: 5px 10px;
  margin-bottom: 0rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 45rpx;
  opacity: 1;
  background: linear-gradient(270deg, #EEF6FF 0%, #FFFFFF 100%);
  box-sizing: border-box;
  border: 2rpx solid #1684FC;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(146, 158, 185, 0.5);
}


.property-info {
  color: white;
  margin-left: 10rpx;
  pointer-events: auto;
}

.property-name {
  font-size: 28rpx;
  line-height: 35rpx;
  font-weight: 500;
  margin-bottom: 4rpx;
  color: #1684FC;
  text-align: left;
}

.property-price {
  font-size: 24rpx;
  line-height: 24rpx;
  margin-top: 8rpx;
  color: #898989;
  text-align: left;
}

.property-arrow {
  width: 24rpx;
  height: 24rpx;
  margin-left: 12rpx;
}

/* 中间建筑图片和圆环样式 */
.building-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.building-image {
  width: 109rpx;
  height: 125rpx;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-circle {
  position: absolute;
  width: 76rpx;
  height: 76rpx;
  border-radius: 50%;
  border: 1rpx solid #0783FA;
  margin-top: -17rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 76rpx;
  height: 76rpx;
}

.inner-circle {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 500;
  color: #fff;
  z-index: 1;
}

.building-img {
  background-color: #fff;
  width: 66rpx;
  height: 66rpx;
  border-radius: 50%;
  position: absolute;
  top: 4rpx;
  left: 4rpx;
}
</style>